<template>
  <div class="bookcontiner beautifulScroll">
    <div class="booktop">
      <div class="bookback" @click="backan"><van-icon name="arrow-left" /></div>
      <div class="bookname">意见反馈</div>
    </div>
    <img src="@/assets/images/mj.png" alt="" class="mgs" />
    <div class="hel">Hello</div>
    <div class="yshm">有什么好的建议可以分享下哦~</div>
    <div class="rcb">
      <img src="@/assets/images/rcbj.png" alt="" />
      <div class="rcbname">反馈内容：</div>
    </div>

    <div class="fkboxmain">
      <div class="fkbox">
        <textarea
          v-model="content"
          rows="4"
          cols="50"
          placeholder="请输入反馈信息"
        ></textarea>
      </div>
      <div class="sbmt" @click="submit">提 交</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { showFailToast, showSuccessToast } from 'vant';
  import { ref } from 'vue';
  import { feedbackAdd } from '@/api/user';
  import { storeToRefs } from 'pinia';
  import { useUserStore } from '@/store';
  const userStore = useUserStore();
  const userdata = storeToRefs(userStore);
  const studentId = ref(userdata.studentId.value);

  const content = ref('');

  const submit = () => {
    if (content.value == '') {
      showFailToast('请输入内容');
      return;
    }
    feedbackAdd({
      userId: studentId.value,
      content: content.value,
    }).then((res: any) => {
      if (res.code == 200) {
        showSuccessToast('反馈成功');
        content.value = '';
      }
    });
  };
  import { useRouter } from 'vue-router';
  const router = useRouter();
  const backan = () => {
    router.push({
      name: 'user',
    });
  };
</script>

<style scoped>
  .fkboxmain {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 50%;
    top: 355px;
    transform: translate(-50%, 0);
    z-index: 999;
    align-items: center;
    justify-content: center;
  }
  .sbmt {
    width: 646px;
    height: 80px;
    background: #556790;
    color: #ffffff;
    font-size: 30px;
    border-radius: 51px 51px 51px 51px;
    line-height: 80px;
    margin: 80px 0;
    text-align: center;
  }
  .mgs {
    position: absolute;
    width: 249px;
    height: 218px;
    right: 35px;
    top: 87px;
  }
  .fkbox textarea {
    width: 646px;
    height: 99%;
    padding: 20px;
    font-size: 26px;
  }
  .fkbox {
    overflow: hidden;
    width: 646px;
    height: 500px;
    background: #ffffff;
    border-radius: 20px 20px 20px 20px;
    z-index: 9;
  }

  .rcbname {
    font-size: 30px;
    color: black;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1;
  }
  .rcb {
    width: 177px;
    height: 98px;
    position: absolute;
    top: 285px;
    left: 52px;
    z-index: 2;
  }
  .rcb img {
    width: 177px;
    height: 98px;
  }
  .hel {
    color: #333333;
    font-size: 45px;
    position: absolute;
    left: 80px;
    top: 120px;
  }
  .yshm {
    color: #666666;
    font-size: 26px;
    position: absolute;
    left: 80px;
    top: 190px;
  }
  .bookcontiner {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #c5dcf9 0%, #f4f4f4 25%);
    position: absolute;
    top: 0;
    left: 0;
    overflow-y: auto;
  }
  .booktop {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    font-size: 32px;
    color: black;
    position: relative;
    top: 0;
    left: 0;
  }
  .bookback {
    font-size: 36px;
    color: black;
    position: absolute;
    left: 20px;
  }
</style>
